<%
include("../header.html"){}
%>
<style>
    .modal-close-btn {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        background: url(../public/img/close.png) no-repeat center;
        width: 32px;
        height: 32px;
        padding: 32px;
        opacity: 0.8;
        cursor: pointer;
        transition: 0.3s ease;
    }
    .modal-close-btn:hover {
        opacity: 1;
    }
</style>
<div class="panel panel-default">
    <div class="panel-heading">
        <div style="position: absolute;right: 24px;"><i class="fa fa-th"></i></div>
        ${projectName}
    </div>
    <div class="panel-body">
        <ul class="nav nav-tabs">
            <li>
                <a href="create.html">
                    <i class="fa fa-plus fa-fw"></i>
                    添加新接口
                </a>
            </li>
            <li>
                <a href="#" id="sharevar">
                    <i class="fa fa-pencil fa-fw"></i>
                    全局变量设置
                </a>
            </li>
            <li>
                <a href="download.html?projectId=${projectId}" id="download">
                    <i class="fa fa-download fa-fw"></i>
                    下载Markdown文档
                </a>
            </li>
            <% if(isLogin){ %>
            <li>
                <a href="javascript:decoders();" id="decoder">
                    <i class="fa fa-refresh fa-fw"></i>
                    解码器切换
                </a>
            </li>

            <li>
                <a href="javascript:alert('你想多了');" id="delproject">
                    <i class="fa fa-remove fa-fw"></i>
                    删除该项目
                </a>
            </li>
            <% } %>
        </ul>

    </div>
</div>
<div class="row">
    <% for(interface in interfaces){ %>
    <div class="col-md-3">
        <div class="panel panel-default">
            <a href="create.html?id=${interface.id}">
                <div class="panel-heading">
                    <div style="position: absolute;right: 24px;"><i class="fa fa-chevron-right"></i></div>
                    ${interface.interfaceName}
                </div>
            </a>
            <% if(isLogin){ %>
            <div class="panel-body">
                <div class="btn-group">
                    <button type="button" class="btn btn-danger" onclick="removeThis('${interface.id}')"><i class="fa fa-trash-o"></i></button>
                </div>
            </div>
            <% } %>
        </div>
    </div>
    <% } %>
</div>

<script>
    function removeThis(id){
        $.post('remove.html',{id:id}, function (data) {
            location.reload(true);
        });
    }
    function decoders(){
        $.post('../project/decoders.html', function (data) {
            $('#decoders-content').html(data);
            $('#decoders-dialog').modal('toggle');
        });
    }

    function switchDecoder(event){
        $.post('../project/switch/decoder.html',{decoder:$(event).text()}, function (data) {
            $('#decoders-dialog').modal('toggle');
        });
    }
    $(function () {
        var closeFn;
        function closeShowingModal() {
            var showingModal = document.querySelector('.modal.show');
            if (!showingModal) return;
            showingModal.classList.remove('show');
            document.body.classList.remove('disable-mouse');
            document.body.classList.remove('disable-scroll');
            if (closeFn) {
                closeFn();
                closeFn = null;
            }
        }
        $('#sharevar').click(function () {
            closeFn = cta(document.querySelector('#sharevar'), document.querySelector('.dialog'), {relativeToWindow: true}, function showModal(modal) {
                modal.classList.add('show');
            });
            $('#global-params').attr('src', $('#global-params').attr('src'));
        });
        $('.modal-close-btn').click(function () {
            closeShowingModal();
        });
    });
</script>

<div class="js-dialog  modal  dialog" style="text-align: center;background-color: #43cca2">
    <span class="modal-close-btn"></span>
    <iframe src="../project/params.html" id="global-params" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div class="modal fade" id="decoders-dialog">
    <div class="modal-dialog" id="decoders-content">
    </div>
</div>
<%
include("../footer.html"){}
%>